<template>
    <view class="x-built-in-scan-code" v-if="visible">
        <!-- <view class="scan-code-title" :style="{ height: navHeight + 'px' }">{{ options.title || '' }}</view> -->
        <view class="scan-code-camera-view">
            <camera class="scan-code-camera" mode="scanCode" device-position="back" flash="off"
                @scancode="onScanCodeHandler" @error="onCameraError"></camera>
            <view v-if="scanTipOption.show" class="scan-tip-view">
                <image :src="scanTipOption.iconPath" class="scan-tip-img" />
                <text>{{ scanTipOption.text || '' }}</text>
            </view>
        </view>
        <view class="scan-code-center">
            <template v-if="$slots.center">
                <slot name="center" />
            </template>
            <view v-else :style="'height: calc(100vh - ' + navHeight + 'px - 450rpx - 64rpx)'" class="scan-code-center-default">
                <view class="flex-center">
                    <view class="scan-code-center-title">扫描结果</view>
                </view>
                <scroll-view scroll-y class="scroll-view">
					<view v-if="dataList.length" class="scroll-title">
						条码数:{{dataList.length}}, 总件数:{{dataList.length * 2}}
					</view>
                    <view v-if="dataList.length" v-for="(item, index) in dataList" :key="index" class="scroll-list-cell border-separate-line">
                        <view class="scroll-list-cell-index">{{ index + 1 }}</view>
                        <view class="flex flex-align-center p-r-20">{{ item }}</view>
                        <view class="flex-align-center color-orange" @click="onDelete(item)">删除</view>
                    </view>
                    <view class="null-data-view" v-if="!dataList.length">
                        <image src="/static/scan/noData.svg" class="null-data-image" />
                        <text>这里什么也没有......</text>
                    </view>
                </scroll-view>
                <view class="scan-code-center-foot">
                    <view class="flex m-r-20" v-show="dataList.length">
                        <tn-button :plain="true" color="#fff" width="100%" @click="close">关闭</tn-button>
                    </view>
                    <view class="flex m-r-20" :class="{ 'm-l-20': dataList.length }">
                        <tn-button :plain="true" color="#fff" width="100%" @click="onCancel">{{ dataList.length ? '清空' : '关闭' }}</tn-button>
                    </view>
                    <view class="flex m-l-20">
                        <tn-button color="#fff" width="100%" backgroundColor="rgba(255, 141, 26, 0.8)" @click="onConfirm">确定</tn-button>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
    export default {
        props: {
            
            /**
             * 顶部导航栏高度 单位px
             */
            navHeight: {
                type: Number,
                default: 91
            },
 
            /**
             * 扫描成功的列表数据
             */
            dataList: {
                type: Array,
                default: () => []
            }
        },
 
        data () {
            return {
                visible: false,
                options: void (0),
                scanTipOption: { show: false },
                scanHandlerLoging: false
            }
        },
 
        computed: {
            
            iconPath () {
                return {
                    success: '/static/scan/success.svg',
                    warn: '/static/scan/warn.svg',
                    error: '/static/scan/error.svg'
                }
            }
        },
 
        methods: {
 
            show (options = {}) {
                this.options = options
                this.visible = true
            },
 
            close () {
                this.$emit('close')
                this.visible = false
            },
 
            onDelete (item) {
                this.$emit('delete', item)
                this.options.delete && this.options.delete(item)
            },
 
            onCancel () {
                if (this.dataList.length) {
                    uni.showModal({
                        title: '提示',
                        content: '确定清空所有扫描内容',
                        cancelColor: "#555",
                        confirmColor: "#FF8D1A",
                        success: res => {
                            if (res.confirm) {
                                this.$emit('cancel')
                                this.options.cancel && this.options.cancel()
                            }
                        }
                    })
                } else {
                    this.close()
                }
            },
 
            onConfirm () {
                this.$emit('ok')
                this.options.ok && this.options.ok()
            },
 
            // 扫码结果处理
            onScanCodeHandler ({ detail }) {
                if (this.scanTipOption.show || this.scanHandlerLoging) {
                    return
                }
                this.scanHandlerLoging = true
                const { result, type } = detail
                if (this.options.scanCallback) {
                    const callbackResult = this.options.scanCallback({ result, type })
                    if (callbackResult && Object.prototype.toString.call(callbackResult) === '[object Promise]') {
                        callbackResult.finally(_ => {
                            this.scanHandlerLoging = false
                        })
                        return
                    }
                }
                this.scanHandlerLoging = false
            },
 
            onCameraError () {
                this.tui.toast('扫码相机启动错误')
            },
 
            // 扫描提示
            scanTip (option = {}) {
                const { type, text, millisecond = 2000, modalFlag } = option
                if (modalFlag) {
                    this.scanTipOption = { show: true }
                    uni.showModal({
                        title: '提示',
                        content: text,
                        showCancel: false,
                        confirmColor: "#FF8D1A",
                        success: _ => {
                            this.scanTipOption.show = false
                        }
                    })
                } else {
                    this.scanTipOption = {
                        show: true,
                        iconPath: this.iconPath[type],
                        text
                    }
                    setTimeout(() => {
                        this.scanTipOption.show = false
                    }, millisecond)
                }
            },
        }
    }
</script>
<style scoped lang="scss">
    .x-built-in-scan-code {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgb(245, 246, 249);
        z-index: 10000;
        color: #333;
        .scan-code-title {
            display: flex;
            align-items: flex-end;
            justify-content: center;
            font-weight: bold;
        }
        .scan-code-camera-view {
            position: relative;
            margin: 0 auto;
            width: 95%;
            height: 450rpx;
            border-radius: 20rpx;
            border: 6rpx solid rgba(255, 141, 26, 1);
            margin-top: 20rpx;
            overflow: hidden;
            .scan-code-camera {
                width: 100%;
                height: 100%;
            }
            .scan-tip-view {
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                background-color: rgba(0, 0, 0, 0.7);
                display: flex;
                flex-direction: column;
                color: #FFF;
                justify-content: space-evenly;
                align-items: center;
                font-weight: bold;
                .scan-tip-img {
                    width: 150rpx;
                    height: 150rpx;
                }
            }
 
        }
        .scan-code-center {
            padding: 0 20rpx;
            margin-top: 20rpx;
            position: relative;
            .scan-code-center-default {
                position: relative;
                background-color: #FFF;
                border-radius: 20rpx;
                .scan-code-center-title {
                    display: inline-block;
                    border-bottom-left-radius: 20rpx;
                    border-bottom-right-radius: 20rpx;
                    padding: 10rpx 40rpx;
                    background-color: rgba(255, 141, 26, 1);
                    color: #FFF;
                    font-size: 28rpx;
                }
                .scroll-view {
                    height: calc(100% - 180rpx);
					.scroll-title {
						padding: 0 40rpx ;
						font-size: 24rpx;
						color: #cccccc;
						height: 50rpx;
						border-bottom: #333 1px solid;
					}
                    .scroll-list-cell {
                        display: flex;
                        padding: 26rpx 20rpx;
                        .scroll-list-cell-index {
                            margin-right: 20rpx;
                            background-color: rgba(255, 141, 26, 1);
                            color: #FFF;
                            font-size: 30rpx;
                            border-radius: 50%;
                            position: relative;
                            top: 2rpx;
                            width: 46rpx;
                            height: 46rpx;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        }
                    }
                    .null-data-view {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        height: 100%;
                        .null-data-image {
                            width: 400rpx;
                            height: 400rpx;
                        }
                        text {
                            color: #929292;
                        }
                    }
                }
                .scan-code-center-foot {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    display: flex;
                    padding: 20rpx 40rpx;
					
					.btn-cancel {
					  color: rgba(255, 141, 26, 1) !important;
					  border-color: rgba(255, 141, 26, 1) !important;
					  background-color: transparent !important;
					  border-radius: 20rpx;
					  height: 92rpx;
					  width: 100%!important;
					  font-size: 32rpx;
					}
                }
            }
        }
        .border-separate-line {
            border-bottom: 2rpx solid #ececec;
        }
    }
    .flex-center {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .flex-align-center {
        display: flex;
        align-items: center;
    }
    .flex {
        flex: 1;
    }
    .color-orange {
        color: rgba(255, 141, 26, 1);
    }
    .p-r-20 {
        padding-right: 20rpx;
    }
    .m-r-20 {
        margin-right: 20rpx;
    }
    .m-l-20 {
        margin-left: 20rpx;
    }
</style>